<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品渲染</title>
    <script src="./iconfont/iconfont.js"></script>
    <style>
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
    <link rel="stylesheet" href="./Css/peijian.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header" id="toper">
        <div class="header-TB">
            <div class="header-T">
                <div class="header-TL">
                    <a href="">首页</a>
                    <span class="sep">|</span>
                    <a href="">华为官网</a>
                    <span class="sep">|</span>
                    <a href="">花粉俱乐部</a>
                    <span class="sep">|</span>
                    <a href="">V码(优购码)</a">
                        <span class="sep">|</span>
                        <a href="">企业购</a href="">
                        <span class="sep">|</span>
                        <a href="">Select Region</a>
                        <span class="sep">|</span>
                        <a href="" class="more" style="height:70px ;display: flex;align-items: center;"><svg
                                class="icon icon-arrow-down" aria-hidden="true">
                                <use xlink:href="#icon-xiala"></use>
                            </svg>
                            <div class="more-xiala">
                                <div class="la">HarmonyOS</div>
                                <div class="la">应用市场</div>
                                <div class="la">华为终端云空间</div>
                                <div class="la">开发者联盟</div>
                            </div>
                        </a>

                </div>

                <div class="header-TR">
                    <a href="">请登录</a>
                    <a href="">注册</a>
                    <span class="sep">|</span>
                    <a href="">我的订单</a>
                    <span class="sep">|</span>
                    <a href="" class="kefu" style="height:70px ;display: flex;align-items: center;"><svg
                            class="icon icon-arrow-down" aria-hidden="true">
                            <use xlink:href="#icon-xiala"></use>
                        </svg>
                        <div class="more-xiala1">
                            <div class="la">服务中心</div>
                            <div class="la">联系客服</div>
                        </div>
                    </a>
                    <span class="sep">|</span>
                    <a href="" class="nav" style="height:70px ;display: flex;align-items: center;"><svg
                            class="icon icon-arrow-down" aria-hidden="true">
                            <use xlink:href="#icon-xiala"></use>
                        </svg>
                        <div class="nav-list">
                            <div class="nav-list-flex">
                                <div class="nav-list-first">
                                    <span> <svg style="width: 40px;height:40px" t="1658240238493" class="icon"
                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                            p-id="3265" width="200" height="200">
                                            <path
                                                d="M950.784 470.016L527.872 102.4a28.723 28.723 0 0 0-37.376 0L73.216 473.088c-8.704 7.68-11.776 19.968-7.68 31.232 4.096 10.752 14.848 18.432 26.624 18.432h58.368V814.08c-1.024 10.24-3.072 47.616 20.992 74.752 10.752 12.288 31.232 27.648 66.56 27.648h531.968c12.8 0 43.52-2.56 68.096-25.088 13.312-12.288 29.696-35.84 29.696-76.288V522.24l65.024-2.048c11.776-0.512 22.016-7.68 25.6-18.944 4.096-11.264 1.024-23.552-7.68-31.232z m-512.512 389.12v-194.56c0.512-1.536 1.536-3.584 4.096-5.632 5.12-5.12 21.504-16.384 67.584-16.384 39.936 0 56.832 9.216 63.488 14.336 6.144 4.608 7.168 9.216 7.168 10.24v192H438.272z m432.64-385.024h-49.664V816.64c0 29.696-24.064 53.248-53.248 53.248H628.736V637.44c-0.512-1.536-2.048-9.216-11.776-16.896-11.264-9.216-39.936-24.064-106.496-24.064-77.312 0-104.96 19.456-113.152 27.648-4.096 4.096-5.632 7.68-6.656 9.728V870.4H250.88c-29.696 0-53.248-24.064-53.248-53.248V475.136h-49.664c-4.096 0-6.144-5.12-3.072-8.192L499.2 158.72c5.632-4.608 13.824-4.608 19.456 0l355.328 307.712c3.072 2.56 1.024 7.68-3.072 7.68z"
                                                p-id="3266" fill="#8a8a8a"></path>
                                        </svg></span>
                                    <span style="margin-top:20px ;">商城首页</span>
                                </div>
                                <div>
                                    <h3>频道</h3>
                                    <span>华为专区</span>
                                    <span>教育优惠</span>
                                </div>
                                <div>
                                    <h3></h3>
                                    <span>企业购</span>
                                    <span>HarmonyOS</span>
                                </div>
                                <div>
                                    <h3>产品</h3>
                                    <span>手机</span>
                                    <span>平板</span>
                                    <span>智能家居</span>
                                    <span>耳机音箱</span>
                                    <span>生态产品</span>
                                </div>
                                <div>
                                    <h3></h3>
                                    <span>笔记本</span>
                                    <span>智能穿戴</span>
                                    <span>智慧屏</span>
                                    <span>热销配件</span>
                                    <span>增值服务</span>
                                </div>
                                <div>
                                    <h3>增值服务</h3>
                                    <span>以旧换新</span>
                                    <span>一口价换电池</span>
                                    <span>穿戴延保</span>
                                    <span>活动公告</span>
                                </div>
                                <div>
                                    <h3></h3>
                                    <span>补购保障</span>
                                    <span>音频延保</span>
                                    <span>智慧屏全质保</span>
                                </div>
                                <div>
                                    <h3>会员</h3>
                                    <span>会员频道</span>
                                </div>
                            </div>
                        </div>
                    </a>
                    <span class="sep">|</span>
                    <a href="" class="phone" style="height:70px ;display: flex;align-items: center;"><svg
                            class="icon icon-arrow-down" aria-hidden="true">
                            <use xlink:href="#icon-xiala"></use>
                        </svg>
                        <div class="more-xiala2">
                            <img src="./images/手机版.png" alt="手机版二维码">
                        </div>
                    </a>
                    <div class="Car"> <a href="" class="shoppingCar">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-gouwuche"></use>
                            </svg>
                        </a>
                        <div class="myCar"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-MB">
            <div class="header-M">
                <div class="logo">
                    <img src="https://res.vmallres.com/portal/1.11.5.300/h5/images/logo_app.png" alt="">
                </div>
                <div class="titles">
                    <a href="" class="item allClass"><svg t="1657942518583" class="icon" viewBox="0 0 1024 1024"
                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2219" width="200" height="200">
                            <path
                                d="M122.065592 200.99371m-51.776224 0a50.597 50.597 0 1 0 103.552447 0 50.597 50.597 0 1 0-103.552447 0Z"
                                p-id="2220"></path>
                            <path
                                d="M122.065592 459.888132c-28.593222 0-51.776224 23.171746-51.776224 51.763944 0 28.605501 23.183002 51.774177 51.776224 51.774177 28.593222 0 51.777247-23.167652 51.777247-51.774177C173.841815 483.059877 150.658813 459.888132 122.065592 459.888132z"
                                p-id="2221"></path>
                            <path
                                d="M122.065592 770.535241c-28.593222 0-51.776224 23.183002-51.776224 51.776224 0 28.609595 23.183002 51.788503 51.776224 51.788503 28.593222 0 51.777247-23.178909 51.777247-51.788503C173.841815 793.718243 150.658813 770.535241 122.065592 770.535241z"
                                p-id="2222"></path>
                            <path d="M251.505639 796.424888l698.980555 0 0 51.776224-698.980555 0 0-51.776224Z"
                                p-id="2223"></path>
                            <path d="M251.505639 485.765499l698.980555 0 0 51.7752-698.980555 0 0-51.7752Z" p-id="2224">
                            </path>
                            <path d="M251.505639 175.105087l698.980555 0 0 51.777247-698.980555 0 0-51.777247Z"
                                p-id="2225"></path>
                        </svg> 全部分类</a>
                    <a href="" class="item">华为专区</a>
                    <a href="" class="item">鸿蒙智联</a>
                    <a href="" class="item">莫塞尔</a>
                    <a href="" class="item">华为智选</a>
                    <a href="" class="item">HarmonyOS</a>
                    <a href="" class="item">特惠企采</a>
                    <a href="" class="item">教育购</a>
                </div>
                <div class="search">
                    <svg class="icon SC" aria-hidden="true">
                        <use xlink:href="#icon-sousuo"></use>
                    </svg>
                </div>
            </div>
        </div>
        <div class="homePage">
            <span style="color:#848383 ;">首页</span>
            >
            <span>配件</span>
        </div>
        <div class="header-B">
            <div class="header-BH1">
                <div class="header-BH">分类：</div>
                <div class="header-B-items">专属配件</div>
                <div class="header-B-items">通用配件</div>
                <div class="header-B-items">配件</div>
                <div class="header-B-items">保护壳</div>
                <div class="header-B-items">手机保护壳</div>
                <div class="header-B-items">眼镜配件</div>
                <div class="header-B-items">镜片</div>
                <div class="header-B-items">生态产品</div>
                <div class="more1"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiala"></use>
                    </svg></div>
            </div>
            <div class="header-BH2">
                <div class="header-BH">服务优惠：</div>
                <div class="header-B-items">
                    <div class="I">仅看有货 <div class="kuang"><svg t="1657951150647" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1156" width="200" height="200">
                                <path
                                    d="M887.904 298.208c-12.864-12.064-33.152-11.488-45.216 1.408L415.936 753.984l-233.12-229.696c-12.608-12.416-32.864-12.288-45.28 0.32-12.416 12.576-12.256 32.864 0.352 45.248l256.48 252.672c0.096 0.096 0.224 0.128 0.32 0.224s0.128 0.224 0.224 0.32c2.016 1.92 4.448 3.008 6.784 4.288 1.152 0.672 2.144 1.664 3.36 2.144 3.776 1.472 7.776 2.24 11.744 2.24 4.192 0 8.384-0.832 12.288-2.496 1.312-0.544 2.336-1.664 3.552-2.368 2.4-1.408 4.896-2.592 6.944-4.672 0.096-0.096 0.128-0.256 0.224-0.352 0.064-0.096 0.192-0.128 0.288-0.224L889.28 343.424c12.16-12.832 11.488-33.088-1.376-45.216z"
                                    fill="#ffffff" p-id="1157"></path>
                            </svg></div>
                    </div>
                </div>
                <div class="header-B-items">
                    <div class="I">分期免息 <div class="kuang"><svg t="1657951150647" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1156" width="200" height="200">
                                <path
                                    d="M887.904 298.208c-12.864-12.064-33.152-11.488-45.216 1.408L415.936 753.984l-233.12-229.696c-12.608-12.416-32.864-12.288-45.28 0.32-12.416 12.576-12.256 32.864 0.352 45.248l256.48 252.672c0.096 0.096 0.224 0.128 0.32 0.224s0.128 0.224 0.224 0.32c2.016 1.92 4.448 3.008 6.784 4.288 1.152 0.672 2.144 1.664 3.36 2.144 3.776 1.472 7.776 2.24 11.744 2.24 4.192 0 8.384-0.832 12.288-2.496 1.312-0.544 2.336-1.664 3.552-2.368 2.4-1.408 4.896-2.592 6.944-4.672 0.096-0.096 0.128-0.256 0.224-0.352 0.064-0.096 0.192-0.128 0.288-0.224L889.28 343.424c12.16-12.832 11.488-33.088-1.376-45.216z"
                                    fill="#ffffff" p-id="1157"></path>
                            </svg></div>
                    </div>
                </div>
                <div class="header-B-items">
                    <div class="I">优惠商品 <div class="kuang"><svg t="1657951150647" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1156" width="200" height="200">
                                <path
                                    d="M887.904 298.208c-12.864-12.064-33.152-11.488-45.216 1.408L415.936 753.984l-233.12-229.696c-12.608-12.416-32.864-12.288-45.28 0.32-12.416 12.576-12.256 32.864 0.352 45.248l256.48 252.672c0.096 0.096 0.224 0.128 0.32 0.224s0.128 0.224 0.224 0.32c2.016 1.92 4.448 3.008 6.784 4.288 1.152 0.672 2.144 1.664 3.36 2.144 3.776 1.472 7.776 2.24 11.744 2.24 4.192 0 8.384-0.832 12.288-2.496 1.312-0.544 2.336-1.664 3.552-2.368 2.4-1.408 4.896-2.592 6.944-4.672 0.096-0.096 0.128-0.256 0.224-0.352 0.064-0.096 0.192-0.128 0.288-0.224L889.28 343.424c12.16-12.832 11.488-33.088-1.376-45.216z"
                                    fill="#ffffff" p-id="1157"></path>
                            </svg></div>
                    </div>
                </div>
            </div>
            <div class="header-BH3">
                <div class="header-BH">排序：</div>
                <div class="header-B-items" style="color:rgb(207, 10, 44);
           ;font-weight: 600;">综合</div>
                <div class="header-B-items">最新</div>
                <div class="header-B-items">评论数</div>
                <div class="header-B-items">价格&nbsp;&nbsp;<svg t="1657948417309" style="font-size: 9px;" class="icon"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3206" width="200"
                        height="200">
                        <path
                            d="M836.8 633.6H187.2c-32 0-51.2 20.8-35.2 36.8 24 25.6 310.4 324.8 324.8 339.2 17.6 19.2 56 16 72 0C560 998.4 854.4 688 872 670.4c16-17.6-4.8-35.2-35.2-36.8zM187.2 390.4h649.6c30.4 0 51.2-19.2 35.2-36.8-17.6-17.6-312-328-324.8-340.8-14.4-16-52.8-17.6-72 0C462.4 28.8 176 328 152 353.6c-16 16 3.2 36.8 35.2 36.8z"
                            fill="#bfbfbf" p-id="3207"></path>
                    </svg></div>
                <div class="pirceBox">
                    <div class="pirce">￥ <input type="text"> </div>
                    <span style="display: flex; align-items: center;">-</span>
                    <div class="pirce">￥ <input type="text"> </div>
                    <div class="pirce-J">
                        <div class="J1">清空</div>
                        <div class="J2">确定</div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- banner -->
    <div class="bannerB">
        <div class="banner">
            <div class="shopItem">
                <div class="shopItem-H">
                    <img src="./images/配件1.webp" alt="">
                </div>
                <div class="shopItem-F">
                    <div class="shopItem-FH" title="HUAWEI nova 10 Pro 超薄PU保护壳">HUAWEI nova 10 Pro 超薄PU保护壳</div>
                    <div><span class="shopItem-FC">&nbsp;</span></div>
                    <div class="shopItem-Fnum">￥79</div>
                    <div><span
                            style=" border-radius: 4px; border: 1px solid rgb(206, 13, 13);font-size: 12px;color: rgb(207, 10, 44);line-height: 24px;">赠送积分</span>
                    </div>
                    <div style="color: #999999;font-size: 12px;"><span>31人好评</span> <span>100%好评</span></div>
                </div>
            </div>
            <div class="shopItem">
                <div class="shopItem-H">
                    <img src="./images/配件2.webp" alt="">
                </div>
                <div class="shopItem-F">
                    <div class="shopItem-FH" title="HUAWEI 超级快充电源适配器（Max 90W）"><img src="./images/新品上市.png"
                            style="width:60px ;position: absolute;" alt="">HUAWEI 超级快充电源适配器（Max 90W）</div>
                    <div><span class="shopItem-FC">&nbsp;</span></div>
                    <div class="shopItem-Fnum">￥249</div>
                    <div><span
                            style=" border-radius: 4px; border: 1px solid rgb(206, 13, 13);font-size: 12px;color: rgb(207, 10, 44);line-height: 24px;">赠送积分</span>
                    </div>
                    <div style="color: #999999;font-size: 12px;"><span>4人好评</span> <span>100%好评</span></div>
                </div>
            </div>
            <div class="shopItem">
                <div class="shopItem-H">
                    <img src="./images/配件3.png" alt="">
                </div>
                <div class="shopItem-F">
                    <div class="shopItem-FH" title="rock space×和平精英华为Mate/P系列保护壳-晶透浮雕壳">rock
                        space×和平精英华为Mate/P系列保护壳-晶透浮雕壳</div>
                    <div><span class="shopItem-FC" title="晶钻透亮，减震防摔，亲肤手感，不易变色">晶钻透亮，减震防摔，亲肤手感，不易变色</span></div>
                    <div class="shopItem-Fnum">￥79</div>
                    <div><span class="shopItem-FC">&nbsp;</span></div>
                    <div style="color: #999999;font-size: 12px;"><span>18人好评</span> <span>94%好评</span></div>
                </div>
            </div>
            <div class="shopItem">
                <div class="shopItem-H">
                    <img src="./images/配件4.png" alt="">
                </div>
                <div class="shopItem-F">
                    <div class="shopItem-FH">卡伦顿 华为 Mate 40 RS保时捷手机壳</div>
                    <div><span class="shopItem-FC" title="智能视窗，免翻盖接听，头层牛皮，摄像头保护">智能视窗，免翻盖接听，头层牛皮，摄像头保护</span></div>
                    <div class="shopItem-Fnum">￥569 <span style="font-size: 12px;color:#999999 ;"><del>￥599</del></span>
                    </div>
                    <div><span
                            style=" border-radius: 4px; border: 1px solid rgb(206, 13, 13);font-size: 12px;color: rgb(207, 10, 44);line-height: 24px;">限时优惠</span>
                        <span
                            style=" border-radius: 4px; border: 1px solid rgb(206, 13, 13);font-size: 12px;color: rgb(207, 10, 44);line-height: 24px;">分期免息</span>
                    </div>
                    <div style="color: #999999;font-size: 12px;"><span>133人好评</span> <span>93%好评</span></div>
                </div>
            </div>
            <div class="shopItem">
                <div class="shopItem-H">
                    <img src="./images/配件5.png" alt="">
                </div>
                <div class="shopItem-F">
                    <div class="shopItem-FH">卡伦顿 华为 Mate 30 RS手机壳</div>
                    <div><span class="shopItem-FC">&nbsp;</span></div>
                    <div class="shopItem-Fnum">￥299</div>
                    <div><span
                            style=" border-radius: 4px; border: 1px solid rgb(206, 13, 13);font-size: 12px;color: rgb(207, 10, 44);line-height: 24px;">分期免息</span>
                    </div>
                    <div style="color: #999999;font-size: 12px;"><span>5人好评</span> <span>80%好评</span></div>
                </div>
            </div>
            <div class="shopItem">
                <div class="shopItem-H">
                    <img src="./images/配件6.png" alt="">
                </div>
                <div class="shopItem-F">
                    <div class="shopItem-FH" title="决色 华为 P50 Pro 超轻薄芳纶纤维手机壳">决色 华为 P50 Pro 超轻薄芳纶纤维手机壳</div>
                    <div><span class="shopItem-FC">&nbsp;</span></div>
                    <div class="shopItem-Fnum">￥198<span style="font-size: 12px;color:#999999 ;"><del>￥218</del></span>
                    </div>
                    <div><span
                            style=" border-radius: 4px; border: 1px solid rgb(206, 13, 13);font-size: 12px;color: rgb(207, 10, 44);line-height: 24px;">限时优惠</span>
                    </div>
                    <div style="color: #999999;font-size: 12px;"><span>32人好评</span> <span>91%好评</span></div>
                </div>
            </div>
            <div class="shopItem">
                <div class="shopItem-H">
                    <img src="./images/配件7.png" alt="">
                </div>
                <div class="shopItem-F">
                    <div class="shopItem-FH">决色 华为 Mate40 Pro 超轻薄芳纶纤维保护壳</div>
                    <div><span class="shopItem-FC">&nbsp;</span></div>
                    <div class="shopItem-Fnum">￥258<span style="font-size: 12px;color:#999999 ;"><del>￥298</del></span>
                    </div>
                    <div><span
                            style=" border-radius: 4px; border: 1px solid rgb(206, 13, 13);font-size: 12px;color: rgb(207, 10, 44);line-height: 24px;">限时优惠</span>
                    </div>
                    <div style="color: #999999;font-size: 12px;"><span>47人好评</span> <span>94%好评</span></div>
                </div>
            </div>
            <div class="shopItem">
                <div class="shopItem-H">
                    <img src="./images/配件8.png" alt="">
                </div>
                <div class="shopItem-F">
                    <div class="shopItem-FH" title="卡伦顿 华为 真皮信封电脑套/14寸电脑通用电脑内胆包">卡伦顿 华为 真皮信封电脑套/14寸电脑通用电脑内胆包</div>
                    <div><span class="shopItem-FC">品质防摔保护套</span></div>
                    <div class="shopItem-Fnum">￥299</div>
                    <div><span
                            style=" border-radius: 4px; border: 1px solid rgb(206, 13, 13);font-size: 12px;color: rgb(207, 10, 44);line-height: 24px;">分期免息</span>
                    </div>
                    <div style="color: #999999;font-size: 12px;"><span>3人好评</span> <span>100%好评</span></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 尾部 -->
    <div class="footer">

        <div class="footer-bottom">
            <!-- <img src="./images/footer.png" alt=""> -->

            <div class="footer-bottom-detail">
                <h4>选购指南</h4>
                <span>免息分期</span>
                <span>以旧换新</span>
                <span>众测活动</span>
                <span>企业购</span>
                <span>O2O采购</span>
            </div>
            <div class="footer-bottom-detail">
                <h4>售后服务</h4>
                <span>门店维修</span>
                <span>保障政策</span>
                <span>防伪查询</span>
                <span>退换货政策</span>
                <span>手机寄修服务</span>
                <span>维修备件价格查询</span>
            </div>
            <div class="footer-bottom-detail">
                <h4>维修与技术支持</h4>
                <span>服务店</span>
                <span>预约维修</span>
                <span>手机寄修</span>
                <span>备件价格查询</span>
                <span>上门服务</span>
            </div>
            <div class="footer-bottom-detail">
                <h4>特色服务</h4>
                <span>防伪查询</span>
                <span>补购保障</span>
                <span>以旧换新</span>
                <span>礼品包装</span>
            </div>
            <div class="footer-bottom-detail">
                <h4>关注我们</h4>
                <span>公司介绍</span>
                <span>华为零售店</span>
                <span>商家中心</span>
                <span>意见反馈</span>
            </div>
            <div class="footer-bottom-detail">
                <h4>友情链接</h4>
                <span>华为集团</span>
                <span>华为CBG官网</span>
                <span>花粉俱乐部</span>
                <span>华为云</span>
                <span>华为应用市场</span>
                <span>华为心声社区</span>
            </div>
            <div class="footer-bottom-right">
                <span>950805</span>
                <span class="tel">7 x 24 小时客服热线 (仅收市话费)</span>
                <div class="onlineCustomerService"><svg t="1657958324924" class="icon" viewBox="0 0 1030 1024"
                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1156" width="200" height="200">
                        <path
                            d="M167.936 697.856h-26.112c-48.128 0-87.04-38.912-87.04-87.04V498.688c0-48.128 38.912-87.04 87.04-87.04h26.112c48.128 0 87.04 38.912 87.04 87.04v112.128c0 48.128-38.912 87.04-87.04 87.04z m-26.112-235.008c-19.968 0-35.84 15.872-35.84 35.84v112.128c0 19.968 15.872 35.84 35.84 35.84h26.112c19.968 0 35.84-15.872 35.84-35.84V498.688c0-19.968-15.872-35.84-35.84-35.84h-26.112zM926.72 697.856h-26.112c-48.128 0-87.04-38.912-87.04-87.04V498.688c0-48.128 38.912-87.04 87.04-87.04h26.112c48.128 0 87.04 38.912 87.04 87.04v112.128c0 48.128-38.912 87.04-87.04 87.04z m-26.112-235.008c-19.968 0-35.84 15.872-35.84 35.84v112.128c0 19.968 15.872 35.84 35.84 35.84h26.112c19.968 0 35.84-15.872 35.84-35.84V498.688c0-19.968-15.872-35.84-35.84-35.84h-26.112z"
                            p-id="1157"></path>
                        <path
                            d="M911.36 439.296c-14.336 0-25.6-11.264-25.6-25.6 0-194.56-158.72-352.768-353.28-352.768S179.712 219.136 179.712 413.696c0 14.336-11.264 25.6-25.6 25.6s-25.6-11.264-25.6-25.6c0-222.72 181.248-403.968 403.968-403.968 223.232 0 404.48 181.248 404.48 403.968 0 14.336-11.264 25.6-25.6 25.6zM809.984 928.768c-7.68 0-15.36-3.584-20.48-10.24-8.192-11.264-6.144-27.136 5.12-35.84 57.344-42.496 91.136-108.544 93.696-180.736 0.512-14.336 12.288-25.088 26.624-24.576 14.336 0.512 25.088 12.288 24.576 26.624-2.56 88.064-44.544 168.448-114.176 220.672-4.608 2.56-10.24 4.096-15.36 4.096z"
                            p-id="1158"></path>
                        <path
                            d="M729.088 1007.104c-49.664 0-90.112-40.448-90.112-90.112 0-49.664 40.448-90.112 90.112-90.112 49.664 0 90.112 40.448 90.112 90.112 0 49.664-40.448 90.112-90.112 90.112z m0-129.024c-21.504 0-38.912 17.408-38.912 38.912 0 21.504 17.408 38.912 38.912 38.912 21.504 0 38.912-17.408 38.912-38.912 0-21.504-17.408-38.912-38.912-38.912z"
                            p-id="1159"></path>
                    </svg>&nbsp;&nbsp;在线客服</div>
                <span class="vmall">关注VMALL：<svg class="icon FF weixin" aria-hidden="true">
                        <use xlink:href="#icon-weixin"></use>
                    </svg><svg class="icon FF" aria-hidden="true">
                        <use xlink:href="#icon-toutiaoyangshi"></use>
                    </svg><svg class="icon FF" aria-hidden="true">
                        <use xlink:href="#icon-weibo"></use>
                    </svg><svg class="icon FF" aria-hidden="true">
                        <use xlink:href="#icon-BaiDu"></use>
                    </svg>
                    <div class="erWuMa">
                        <img src="https://res.vmallres.com/pimages//pages/cdnImages/66357398344619375366.jpg" alt="">
                    </div>
                </span>
            </div>
        </div>
        <div class="footer-bottom1">
            <div class="bottom-left">
                <img src="./images/logo1.png" />
            </div>
            <div class="end" style=" font-size: 12px;margin-top: -10px; margin-right: 160px;">
                <p>
                    <a href="#" class="items"><span style="color: #00000099">华为集团</span></a>
                    <a href="#" class="items"><span style="color: #00000099">华为CBG官网</span></a>
                    <a href="#" class="items"><span style="color: #00000099">华为应用市场</span></a>
                    <a href="#" class="items"><span style="color: #00000099">HarmonyOS</span></a>
                    <a href="#" class="items"><span style="color: #00000099">华为终端云空间</span></a>
                    <a href="#" class="items"><span style="color: #00000099">开发者联盟</span></a>
                    <a href="#" style="color: #00000099">华为商城手机版</a>
                </p>
                <p>
                    <a href="#" class="items">隐私声明 服务协议 COOKIES Copyright &copy; 2012-2022
                        华为终端有限公司 版权所有
                    </a>
                    <a href="#" class="items">经营资质</a>
                    <a href="#" class="items">粤ICP备19015064号</a>
                    <a href="#" style="color: #00000066">粤公网安备 44190002003939号</a>
                </p>
                <p>
                    <a href="#" class="items">增值电信业务经营许可证：粤B2-20190762</a>
                    <a href="#" class="items">备案主体编号：44201919072182</a>
                    <a href="#" class="items">粤新出网备（2021）2号</a>
                    <a href="#" style="color: #00000066">（粤）网械平台备字[2022]第00005号</a>
                </p>
                <p>
                    <a href="#" class="items">互联网药品信息服务资格证（粤）-非经营性-2020-0102
                    </a>
                    <a href="#" class="items">粤东食药监械经营备20203930</a>
                    <a href="#" style="color: #00000066">广东省网络食品交易第三方平台备案：GDWS10168</a>
                </p>
            </div>
            <div style="cursor: pointer">
                <img src="./images/last.png" />
            </div>
        </div>
    </div>

    <!-- 固定部分 -->
    <div class="fixed">
        <div class="shopCar">
            <svg style="font-size:30px ;" class="icon" aria-hidden="true">
                <use xlink:href="#icon-gouwuche"></use>
            </svg><br>
            购物车
        </div>
        <div class="my">
            <svg style="font-size:30px ;" class="icon" aria-hidden="true">
                <use xlink:href="#icon-gerenzhongxin"></use>
            </svg>
            个人中心
        </div>
        <div class="service">
            <svg class="SE" width="24" height="24" viewBox="0 0 1024 1024">
                <path
                    d="M691.323 554.667c50.151 0 108.84 31.054 178.275 92.305v0l5.362 4.771c0.897 0.805 1.796 1.615 2.697 2.43v0l5.426 4.95c1.816 1.67 3.639 3.359 5.469 5.069v0l5.513 5.187 5.556 5.306 5.6 5.425 5.643 5.543 5.687 5.662 5.732 5.78c0.959 0.973 1.92 1.951 2.883 2.934v0l5.799 5.958c12.348 12.764 9.471 33.271-5.948 42.392v0l-224.556 132.833c-120.135 71.064-269.858 76.561-395.221 14.509v0l-187.199-92.659c-26.968-13.349-39.436-44.025-29.082-71.556 10.52-27.973 41.905-43.027 71.304-34.201v0l18.066 5.392 17.398 5.128 16.728 4.864 16.054 4.6 11.596 3.277 11.214 3.128 14.355 3.938 10.317 2.78 13.153 3.474 9.412 2.431 10.233 2.582-0.102-0.803c-1.853-15.581 2.176-31.72 12.197-45.109v0l0.988-1.287 4.070-5.165c15.945-20.236 39.189-33.922 65.102-38.331 1.427-0.243 2.881-0.498 4.363-0.767v0l4.529-0.845 4.696-0.923c0.796-0.16 1.6-0.324 2.41-0.491v0l4.944-1.040 5.11-1.118c0.865-0.193 1.738-0.389 2.617-0.588v0l5.358-1.236 5.522-1.314 5.687-1.392 5.852-1.47 6.016-1.548 6.18-1.626 6.343-1.704 6.507-1.781 3.315-0.92 6.752-1.898 10.433-2.994 7.158-2.093 7.32-2.171c11.552-3.45 22.062-7.086 31.837-10.958 13.094-5.187 24.364-10.552 36.795-17.26v0l17.078-9.46 9.284-5.088 3.424-1.83 2.973-1.522c26.955-13.551 51.528-19.501 87.78-19.501zM691.323 609.858c-27.703 0-43.444 3.974-63.222 14.18v0l-2.086 1.104-5.083 2.767-21.342 11.811-4.869 2.612c-12.862 6.797-25.109 12.526-39.094 18.066-11.356 4.498-23.466 8.689-36.632 12.62v0l-7.855 2.329-7.685 2.245-7.515 2.162-7.346 2.078-7.177 1.994-7.008 1.91-6.84 1.827-6.672 1.743-6.504 1.659-6.336 1.576-6.169 1.492-6.001 1.409-5.835 1.325-5.668 1.241-5.502 1.158c-1.806 0.372-3.585 0.73-5.335 1.074v0l-5.17 0.99-5.004 0.907-2.44 0.422c-11.778 2.004-22.344 8.225-29.592 17.423v0l-4.070 5.165c-2.734 3.469-2.572 8.318 0.388 11.61 13.114 14.585 36.256 20.536 72.599 15.912v0l5.298-0.704c8.706-1.206 16.791-2.576 24.258-4.092v0l4.406-0.927 4.258-0.961c29.983-7.009 48.554-16.582 55.914-27.256v0l0.619-0.87c20.679-28.133 65.923-0.728 47.928 29.831-14.666 24.906-44.576 41.163-88.494 51.436v0l-5.518 1.288-5.919 1.34c-30.146 6.654-53.976 9.146-92.112 8.16v0l-1.098-0.034-2.276-0.101-2.384-0.147-2.492-0.192-2.601-0.237-2.709-0.283-2.818-0.328-2.927-0.374-4.596-0.646-3.201-0.488-5.008-0.817-5.256-0.919-7.394-1.385-7.838-1.568-8.284-1.75-6.506-1.433-6.759-1.536-4.646-1.081-4.759-1.127-4.872-1.173-4.985-1.219-10.31-2.575-5.326-1.356-8.203-2.121-11.337-2.989-11.796-3.173-12.257-3.357-12.72-3.542-13.184-3.726-13.65-3.911-21.353-6.213-14.823-4.374-19.193-5.728c-0.304-0.091-0.628 0.064-0.736 0.353-0.516 1.372 0.105 2.901 1.449 3.566v0l187.199 92.659c107.664 53.291 236.25 48.571 339.425-12.461v0l194.252-114.913-3.559-3.456-4.824-4.63-4.778-4.525-4.732-4.42c-0.785-0.728-1.568-1.452-2.349-2.171v0l-4.663-4.264c-0.773-0.702-1.545-1.4-2.314-2.093v0l-4.593-4.107c-0.762-0.676-1.521-1.347-2.279-2.015v0l-4.522-3.951c-0.75-0.65-1.498-1.295-2.243-1.936v0l-4.451-3.795-4.404-3.691c-0.73-0.606-1.458-1.209-2.184-1.806v0l-4.332-3.535-5.348-4.273-1.060-0.835-4.212-3.276c-0.698-0.537-1.394-1.070-2.088-1.599v0l-4.139-3.12-4.090-3.017-2.027-1.47-4.016-2.862-3.967-2.759c-0.657-0.451-1.312-0.898-1.965-1.341v0l-3.892-2.604c-0.645-0.425-1.287-0.846-1.927-1.263v0l-3.817-2.449-1.89-1.186-3.742-2.295c-1.239-0.748-2.469-1.478-3.692-2.192v0l-3.641-2.089-3.59-1.987c-2.376-1.29-4.718-2.512-7.026-3.666v0l-3.436-1.679c-17.617-8.411-33.161-12.725-46.501-12.992v0zM854.376 152.249c89.892 89.892 90.178 235.69 1.322 327.449l-60.605 60.649c-10.989 10.989-28.73 11.064-39.626 0.168-10.648-10.648-10.819-27.834-0.565-38.866l0.732-0.76 57.885-57.885c69.594-69.594 70.070-181.954 1.062-250.962-68.318-68.318-179.125-68.535-248.861-1.005l-2.101 2.067-95.403 95.403c-10.989 10.989-28.73 11.064-39.626 0.168-10.648-10.648-10.819-27.834-0.565-38.866l36.185-36.229-19.446-19.437c-69.594-69.594-181.954-70.070-250.962-1.062-68.318 68.318-68.535 179.125-1.005 248.861l163.137 163.17c10.989 10.989 11.064 28.73 0.168 39.626-10.648 10.648-27.834 10.819-38.866 0.565l-0.76-0.732-161.070-161.070c-91.572-91.572-92.197-239.413-1.397-330.213 89.892-89.892 235.69-90.178 327.449-1.322l2.764 2.72 19.455 19.429 20.483-20.467c91.572-91.572 239.413-92.197 330.213-1.397z"
                    fill="#000000" fill-opacity="0.4"></path>
            </svg>
            自助服务
        </div>
        <div class="backToper"> <a href="#toper" style="text-decoration:none ;">
                <svg style="position: absolute;font-size:40px ;bottom: 50px;right: 20px;" class="icon"
                    aria-hidden="true">
                    <use xlink:href="#icon-fanhuidingbu"></use>
                </svg><br><br>
                返回顶部</a>
        </div>
    </div>
    <script src="./units/jquery-3.6.0.js"></script>
    <script>
        /* 
                   jq的ajax的用法
                   $.ajax({
                       url:'地址、接口',
                       data:{}  //给后台的数据
                       methods:'get,post'  默认是get
                       success:(res)=>{
                           //res就是后台给我们的数据
                       }
                   })
               */
        oShopImg = document.querySelectorAll('.shopItem-H');
        // console.log(oShopImg.length);
        //一上来获取数据
        $.ajax({
            url: '/getShops',
            method: 'get',
            success: ({ data }) => {
                data.forEach((v,i) => {
                    let oImg = document.createElement('div');
                    oImg.innerHTML = `<img src="${v.shopLink}" alt="">`;
                    oShopImg[i].innerHTML = oImg.innerHTML;
                })
            }
        })
    </script>
</body>

</html>